<template>
    <div class="login">
        <div class="login-form">
            <h3>“微商城”后台管理系统</h3>
            <el-form ref="loginForm" :model="loginData" :rules="rules" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model.trim="loginData.username" clearable placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" show-password clearable v-model.trim="loginData.password"
                        placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin">登录</el-button>
                    <el-button type="default" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useTokenStore } from '@/stores/token'
import { useUserInfoStore } from "@/stores/userInfo";
import { useRouter } from 'vue-router'
import { userLoginService, getUserInfoService } from '@/apis/user'
import { useOtherStore } from '@/stores/other'
import { ElMessage } from 'element-plus'
import { formatDate } from '@/utils/tools'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
const otherStore = useOtherStore();
const router = useRouter();
const loginData = ref({
    username: "",
    password: ""
});
const rules = {
    username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 3, max: 10, message: "用户名长度在 3 到 10 个字符之间", trigger: "blur" }
    ],
    password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 5, max: 16, message: "密码长度在 5 到 16 个字符之间", trigger: "blur" }
    ]
};
const loginForm = ref(null);
const handleLogin = () => {
    loginForm.value.validate(async (valid) => {
        if (!valid) {
            return false;
        }
        let res = await userLoginService(loginData.value);
        ElMessage.success(res.errmsg);
        // 保存token到本地
        tokenStore.setToken(res.data.token);
        // 获取用户信息
        let userInfoRes = await getUserInfoService();
        // 保存用户信息到本地
        // 保存登录时间
        otherStore.userLoginTime = formatDate(new Date());
        userInfoStore.setUserInfo(userInfoRes.data);
        // 跳转到首页
        router.push("/");
    });
};
const handleReset = () => {
    loginData.value = {
        username: "",
        password: ""
    };
};
</script>
<style scoped>
.login {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../assets/login_bg.jpg");
    width: 100%;
    height: 100vh;
}

.login-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    row-gap: 20px;
    width: 400px;
    flex-direction: column;
    align-items: center;
}

.login-form .el-form {
    width: 100%;
}

.login-form .el-input {
    width: 100%;
}
</style>